<template>
  <div class="DetailShopMessage" v-if="Object.keys(shopInfo).length !==0">
    <!-- 商品logo和名称 -->
    <div class="shop-name">
      <img :src="shopInfo.logo" alt="">
      <span class="title">{{shopInfo.name}}</span>
    </div>
    <!-- 商品信息 -->
    <div class="shop-middle">
      <div class="middle-left">
        <div class="first-left">
          <p class="sells">{{shopInfoSells}}</p>
          <p>总销量</p>
        </div>
        <div class="second-left">
          <p class="goodsCount">{{shopInfo.goodsCount}}</p>
          <p>全部宝贝</p>
        </div>
      </div>
      <div class="middle-right">
        <ul>
          <li v-for="(item,index) in shopInfo.score" :key="index" class="middle-right-value">
            <span class="name">{{item.name}}</span>
            <span class="score" :style="color(item.isBetter)">{{item.score}}</span>
            <span class="value" :style="color(item.isBetter)">{{item.isBetter?"高":"低"}}</span>
          </li>
        </ul>
      </div>
    </div>
    <!-- 进入店铺看看按钮 -->
    <div class="btn">
      <button>进店逛逛</button>
    </div>

    
  </div>
</template>
<script>
export default {
  name:"DetailShopMessage",
  data() {
    return {
      red:"red",
      green:"green"
      
    }
  },
  methods: {
    color:function(itemIsBetter){
      return itemIsBetter?{"color":this.red}:{"color":this.green}
    }
  },
  props:{
    shopInfo:{
      type:Object,
      default:function(){
        return {}
      }
    }
  },
  computed:{
    shopInfoSells:function(){
      if(this.shopInfo.sells>=10000){
        return (this.shopInfo.sells/10000).toFixed(1)+"万"
      }else{
        return this.shopInfo.sells
      }
    },
    

  }
}
</script>
<style scoped>
.DetailShopMessage{
  margin:0px 10px
}
.shop-name{
 margin:15px 0px;
}
.shop-name img{
  width: 38px;
  height:38px ;
  margin-right: 4px;
  margin-left:4px;
  border-radius:2px;
  border:1px solid #999;
  vertical-align: middle;
  
}
.shop-name title{
    font-size: 13px;
    color: #666;
    vertical-align: middle;
}

.shop-middle{
  display: flex;
  width: 100%;

}
.middle-left{
  display: flex;
  text-align: center;
  width:0;
  flex-grow:1;
  justify-content: space-around;
  border-right: 2px solid #ccc;
  align-items: center;
  
}
.first-left .sells,
.second-left .goodsCount {
  font-size: 20px;
  font-weight: 800;
  margin-bottom:3px ;
}
.first-left,
.second-left{
  font-weight: 800;
}
.middle-right{
  
  margin-left: 10px;
}
ul,li{
  list-style: none;
  margin: 10px auto;
  
}
.name{
  float: left;
  overflow: hidden;
}
.score{
  font-size: 15px;
  color: #666;
  margin:10px 10px
}

.value{
  float: right;
  overflow: hidden;
}
.btn{
  width: 100%;
  display: flex;
  justify-content: center;

}
.btn button {
    /* 去掉默认样式 */
    margin:20px auto;
    border: none;
    outline: none;
    width: 120px;
    height: 25px;
    line-height: 25px;
    font-size: 12px;
    background-color: #f2f5f8;
    border-radius: 8px;
    color: #666;
  }


</style>